<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>D3.js Connect Circles' Edges Example</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>

<body>
  <svg id="mySvg" width="600" height="400"></svg>

  <script>
    // 定义两个圆的中心点坐标和半径
    var circle1 = { cx: 100, cy: 100, r: 20, text: '客户经理', lineText: '十天时间' };
    var circle2 = { cx: 300, cy: 200, r: 20, text: '客户经理2' };

    // 创建SVG元素
    var svg = d3.select("#mySvg");

    function drawConnect(svg, circle1, circle2) {
      // 计算两个圆心的距离
      var distance = Math.sqrt(Math.pow(circle2.cx - circle1.cx, 2) + Math.pow(circle2.cy - circle1.cy, 2));

      // 计算第一个圆的边缘点（沿着圆心连线方向）
      var angle = Math.atan2(circle2.cy - circle1.cy, circle2.cx - circle1.cx); // 计算两个圆心之间的夹角
      var edgePoint1 = {
        x: circle1.cx + circle1.r * Math.cos(angle),
        y: circle1.cy + circle1.r * Math.sin(angle)
      };

      // 计算第二个圆的边缘点（沿着圆心连线方向）
      var edgePoint2 = {
        x: circle2.cx - circle2.r * Math.cos(angle),
        y: circle2.cy - circle2.r * Math.sin(angle)
      };

      // 使用d3.line()生成路径
      var lineGenerator = d3.line()
        .x(function (d) { return d.x; })
        .y(function (d) { return d.y; })
        .curve(d3.curveBasis);

      // 添加路径到SVG，连接两个圆的边缘点
      svg.append("path")
        .attr("d", lineGenerator([edgePoint1, edgePoint2]))
        .attr("stroke", "blue")
        .attr("stroke-width", 2)
        .attr("fill", "none");

      // 添加箭头标记定义
      if (!svg.select("#arrow").node()) {
        svg.append("defs").append("marker")
          .attr("id", "arrow")
          .attr("viewBox", "0 -5 10 10")
          .attr("refX", 9)
          .attr("refY", 0)
          .attr("markerWidth", 6)
          .attr("markerHeight", 6)
          .attr("orient", "auto")
          .append("path")
          .attr("d", "M0,-5L10,0L0,5")
          .style("fill", "blue");
      }

      // 为路径添加箭头
      svg.select("path")
        .attr("marker-end", "url(#arrow)");
    }
    // 计算线上特定位置的点
    function calculatePointOnLine(start, end, t) {
      var x = start.x + (end.x - start.x) * t;
      var y = start.y + (end.y - start.y) * t;
      return { x: x, y: y };
    }
    // 可选：添加圆形到SVG以可视化位置
    svg.append("circle")
      .attr("cx", circle1.cx)
      .attr("cy", circle1.cy)
      .attr("r", circle1.r)
      .attr("fill", "none")
      .attr("stroke", "black")
      .attr("stroke-width", 2);

    svg.append("circle")
      .attr("cx", circle2.cx)
      .attr("cy", circle2.cy)
      .attr("r", circle2.r)
      .attr("fill", "none")
      .attr("stroke", "black")
      .attr("stroke-width", 2);
    // 添加文本到圆上
    svg.append("text")
      .attr("x", circle1.cx)
      .attr("y", circle1.cy - circle1.r - 10) // 调整 y 值以确保文本在圆外
      .text(circle1.text)
      .attr("fill", "black")
      .attr("text-anchor", "middle") // 居中文本
      .attr("font-family", "sans-serif")
      .attr("font-size", "14px");

    svg.append("text")
      .attr("x", circle2.cx)
      .attr("y", circle2.cy - circle2.r - 10) // 调整 y 值以确保文本在圆外
      .text(circle2.text)
      .attr("fill", "black")
      .attr("text-anchor", "middle") // 居中文本
      .attr("font-family", "sans-serif")
      .attr("font-size", "14px");
    drawConnect(svg, circle1, circle2);
  </script>
</body>

</html>